<template>
    <div class="backcard">
        <!-- <yd-navbar title="绑定银行卡" bgcolor="#F7F8FA"></yd-navbar> -->
        <yd-cell-group>
            <yd-cell-item @click.native="showBlack = true" class="card-border" arrow>
                <span slot="left">银行卡类型：</span>
                <span slot="left">{{bankName}}</span>
            </yd-cell-item>
            <yd-cell-item class="card-border">
                <span slot="left">银行卡号：</span>
                <yd-input slot="right" v-model="cardCode" ref="code" regex="bankcard" placeholder="请输入银行卡号"></yd-input>
            </yd-cell-item>
            <yd-cell-item class="card-border">
                <span slot="left">持卡人：</span>
                <yd-input slot="right" v-model="name" :on-focus="checkCard" placeholder="请输入持卡人姓名"></yd-input>
            </yd-cell-item>
            <yd-cell-item class="card-border">
                <span slot="left">预留手机号：</span>
                <yd-input slot="right" v-model="tel"  placeholder="请输入预留手机号"></yd-input>
            </yd-cell-item>
            <yd-cell-item arrow class="card-border">
                <span slot="left">开户地区：</span>
                <input slot="right" type="text" @click.stop="show=true" v-model="area" readonly placeholder="请选择开户地区">
            </yd-cell-item>
            <yd-cell-item class="card-border">
                <span slot="left">开户行：</span>
                <yd-input slot="right" v-model="accountBank" placeholder="请输入开户银行"></yd-input>
            </yd-cell-item>
            <yd-cell-item arrow class="card-border">
                <span slot="left">有效期：</span>
                <yd-input type="date" slot="right" v-model="dateBank" placeholder="请选择有效期"></yd-input>
            </yd-cell-item>
            <yd-cell-item class="card-border">
                <span slot="left">银行卡cv2：</span>
                <yd-input slot="right" v-model="Bankcv2" placeholder="请输入银行卡cv2"></yd-input>
            </yd-cell-item>
            <yd-cell-group title="分期期限">
                <yd-cell-item type="radio" class="card-border" v-if="picked_0">
                    <span slot="left">不分期</span>
                    <input slot="right" type="radio" value="0" v-model="picked"/>
                </yd-cell-item>

                <yd-cell-item type="radio" class="card-border" v-if="picked_3">
                    <span slot="left">3期</span>
                    <input slot="right" type="radio" value="3" v-model="picked"/>
                </yd-cell-item>
                <yd-cell-item type="radio" class="card-border" v-if="picked_6">
                    <span slot="left">6期</span>
                    <input slot="right" type="radio" value="6" v-model="picked"/>
                </yd-cell-item>
                <yd-cell-item type="radio" class="card-border" v-if="picked_12">
                    <span slot="left">12期</span>
                    <input slot="right" type="radio" value="12" v-model="picked"/>
                </yd-cell-item>
                <yd-cell-item type="radio" class="card-border" v-if="picked_24">
                    <span slot="left">24期</span>
                    <input slot="right" type="radio" value="24" v-model="picked"/>
                </yd-cell-item>
            </yd-cell-group>
            <yd-cell-item class="card-border">
                <span slot="left">应还金额</span>
                <span slot="right">2222</span>
            </yd-cell-item>
            <yd-cell-item type="label" class="card-border">
                <div slot="left">设为默认：</div>
                <yd-switch slot="right" v-model="isDefault"></yd-switch>
            </yd-cell-item>
        </yd-cell-group>
        <yd-popup v-model="showBlack" position="bottom" height="30%">
        <yd-flexbox>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(1)">
                    <a href="javascript:" class="hotBank-list-ico "  title="中国银行">
                        <img src="../../assets/images/zg.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(2)">
                    <a href="javascript:" class="hotBank-list-ico "  title="平安银行">
                        <img src="../../assets/images/pa.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>

        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(3)">
                    <a href="javascript:" class="hotBank-list-ico "  title="中信银行">
                        <img src="../../assets/images/zx.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(4)">
                    <a href="javascript:" class="hotBank-list-ico "  title="平安银行">
                        <img src="../../assets/images/gd.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(5)">
                    <a href="javascript:" class="hotBank-list-ico "  title="民生银行">
                        <img src="../../assets/images/ms.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(6)">
                    <a href="javascript:" class="hotBank-list-ico "  title="北京银行">
                        <img src="../../assets/images/bj.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(7)">
                    <a href="javascript:" class="hotBank-list-ico "  title="江苏银行">
                        <img src="../../assets/images/js.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(8)">
                    <a href="javascript:" class="hotBank-list-ico "  title="宁波银行">
                        <img src="../../assets/images/nb.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(9)">
                    <a href="javascript:" class="hotBank-list-ico "  title="北京农业商业银行">
                        <img src="../../assets/images/ns.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(10)">
                    <a href="javascript:" class="hotBank-list-ico "  title="九江银行">
                        <img src="../../assets/images/jj.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item>
                <div class="hotBank-list" @click="changeBank(11)">
                    <a href="javascript:" class="hotBank-list-ico "  title="工商银行">
                        <img src="../../assets/images/gs.png" width="150" alt=""/>
                    </a>
                </div>
            </yd-flexbox-item>
        </yd-flexbox>
        </yd-popup>
        <yd-cityselect v-model="show" :callback="result" :items="district"></yd-cityselect>
        <yd-button size="large" type="danger" @click.native="submitHandler" style="height: .8rem;">保存</yd-button>
    </div>
</template>

<script>
import District from 'ydui-district/dist/gov_province_city_area_id'
export default {
    data () {
        return {
            show: false,
            showBlack: false,
            picked_0: true,
            picked_3: true,
            picked_6: true,
            picked_12: true,
            picked_24: true,
            area: '',
            name: '', // 持卡人姓名
            picked: '', // 持卡人姓名
            tel: '', // 预留手机号
            Bankcv2: '', // 预留手机号
            cardCode: '', // 银行卡号
            dateBank: '', // 有效期
            showType: true, // 类型显示
            bankName: '', // 银行名称
            cardType: '', // 卡类型
            cardTypeName: '', // 卡类型名称
            bankCode: '', // 银行缩写
            areaId: '', // 银行卡开户地区id,
            accountBank: '', // 开户银行
            isDefault: true, // 默认开关
            district: District
        }
    },
    mounted () {
        // 页面加载完成自动设置input 银行卡号 为焦点
        // this.$refs.code.setFocus()
    },
    computed: {
        // 计算银行名称 卡片类型
        // fullName () {
        //     return this.bankName + this.cardTypeName
        // }
    },
    methods: {
        // 获取选中的地区信息/id
        result (ret) {
            this.areaId = ret.itemValue3
            this.area = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3
        },
        // 提交
        submitHandler () {
            this.$api.addBankCard({
                bankName: this.bankName,
                areaId: this.areaId,
                accountBank: this.accountBank,
                accountName: this.name,
                tel: this.tel,
                picked: this.picked,
                Bankcv2: this.Bankcv2,
                bankCode: this.bankCode,
                cardNumber: this.cardCode,
                dateBank: this.dateBank,
                isDefault: this.isDefault ? 1 : 2
            }, res => {
                if (res.status) {
                    this.$dialog.toast({
                        mes: res.msg,
                        timeout: 1000,
                        callback: () => {
                            this.$router.go(-1)
                        }
                    })
                }
            })
            // if (this.bankName === '') {
            //     this.$dialog.toast({mes: '请选择开户银行', timeout: 1000})
            // } else if (!this.cardCode) {
            //     this.$dialog.toast({mes: '请输入银行卡号', timeout: 1000})
            // } else if (!/^[\u4E00-\u9FA5]{2,4}$/.test(this.name)) {
            //     this.$dialog.toast({mes: '请输入正确的持卡人名称', timeout: 1000})
            // } else if (!this.tel) {
            //     this.$dialog.toast({mes: '请输入预留手机号信息', timeout: 1000})
            // } else if (this.dateBank === '') {
            //     this.$dialog.toast({mes: '请选择有效期', timeout: 1000})
            // } else if (this.Bankcv2 === '') {
            //     this.$dialog.toast({mes: '请输入银行卡CV2', timeout: 1000})
            // } else if (this.picked === '') {
            //     this.$dialog.toast({mes: '请选择分期期限', timeout: 1000})
            // } else {
            //     this.$api.addBankCard({
            //         bankName: this.bankName,
            //         areaId: this.areaId,
            //         accountBank: this.accountBank,
            //         accountName: this.name,
            //         tel: this.tel,
            //         picked: this.picked,
            //         Bankcv2: this.Bankcv2,
            //         bankCode: this.bankCode,
            //         cardNumber: this.cardCode,
            //         dateBank: this.dateBank,
            //         isDefault: this.isDefault ? 1 : 2
            //     }, res => {
            //         if (res.status) {
            //             this.$dialog.toast({
            //                 mes: res.msg,
            //                 timeout: 1000,
            //                 callback: () => {
            //                     this.$router.go(-1)
            //                 }
            //             })
            //         }
            //     })
            // }
        },
        // 暂通过持卡人input进入焦点事件请求api获取银行信息
        checkCard () {
            this.$api.getBankCardOrganization({card_code: this.cardCode}, res => {
                if (res.status) {
                    const _data = res.data
                    this.bankName = _data.name
                    this.cardType = _data.type
                    this.bankCode = _data.bank_code
                    this.cardTypeName = _data.type_name
                    this.showType = true
                } else {
                    this.bankName = this.cardType = this.bankCode = this.cardTypeName = ''
                    this.showType = false
                }
            })
        },
        // 选择银行
        changeBank (tab) {
            if (tab === 1) {
                this.picked_0 = true
                this.picked_3 = true
                this.picked_6 = true
                this.picked_12 = true
                this.picked_24 = true
                this.bankName = '中国银行'
                this.bankCode = 'BOC'
            } else if (tab === 2) {
                this.picked_0 = false
                this.picked_3 = false
                this.picked_6 = true
                this.picked_12 = false
                this.picked_24 = false
                this.bankName = '平安银行'
                this.bankCode = 'PABC'
            } else if (tab === 3) {
                this.picked_0 = true
                this.picked_3 = false
                this.picked_6 = false
                this.picked_12 = true
                this.picked_24 = false
                this.bankName = '中信银行'
                this.bankCode = 'CITIC'
            } else if (tab === 4) {
                this.picked_0 = false
                this.picked_3 = false
                this.picked_6 = true
                this.picked_12 = false
                this.picked_24 = false
                this.bankName = '光大银行'
                this.bankCode = 'CEB'
            } else if (tab === 5) {
                this.picked_0 = true
                this.picked_3 = false
                this.picked_6 = true
                this.picked_12 = true
                this.picked_24 = true
                this.bankName = '民生银行'
                this.bankCode = 'CMBC'
            } else if (tab === 6) {
                this.picked_0 = false
                this.picked_3 = false
                this.picked_6 = false
                this.picked_12 = true
                this.picked_24 = false
                this.bankName = '北京银行'
                this.bankCode = 'BOB'
            } else if (tab === 7) {
                this.picked_0 = true
                this.picked_3 = true
                this.picked_6 = true
                this.picked_12 = true
                this.picked_24 = true
                this.bankName = '江苏银行'
                this.bankCode = 'JSBK'
            } else if (tab === 8) {
                this.picked_0 = true
                this.picked_3 = true
                this.picked_6 = true
                this.picked_12 = false
                this.picked_24 = true
                this.bankName = '宁波银行'
                this.bankCode = 'NBCB'
            } else if (tab === 9) {
                this.picked_0 = true
                this.picked_3 = true
                this.picked_6 = true
                this.picked_12 = true
                this.picked_24 = true
                this.bankName = '广州农商银行'
                this.bankCode = 'GRCB'
            } else if (tab === 10) {
                this.picked_0 = true
                this.picked_3 = true
                this.picked_6 = false
                this.picked_12 = true
                this.picked_24 = false
                this.bankName = '九江银行'
                this.bankCode = 'JJCCB'
            } else if (tab === 11) {
                this.picked_0 = true
                this.picked_3 = true
                this.picked_6 = false
                this.picked_12 = true
                this.picked_24 = false
                this.bankName = '工商银行'
                this.bankCode = 'ICBC'
            }
            this.showBlack = false
        }
    }
}
</script>

<style scoped>
    .card-border{
        border-bottom: 1px solid #EFEFEF;
    }
    .form_td{
    line-height: 34px !important;
    width: 94px;
    text-align: right;
}

.td_bot{
    padding: 10px 8px  0px 8px !important;
}
.hotBank-list{
    border: 1px solid #ccc;
}
.hotBank-list:hover{
    cursor: pointer;
}
.bank_xl{
    width: 100%;
    border: 1px  solid  #ccc;
    border-top: 0px;
    border-bottom: 0px;
    position: absolute;
    z-index: 1;
    background: #ffffff;
}.bank_xl>ul>li{
     padding-top: 4px;
     padding-bottom: 3px;
     border-bottom: 1px solid #ccc;
     padding-left: 5px;
}.bank_xl>ul>li>a{
  display: block;
    width: 100%;
}

 .bank_xljt{
     position: absolute;
     right: 0px;
     top: 1px;
     width: 50px;
     height: 33px;
     /* background-color: red; */
     line-height: 33px;
     text-align: center;
     border-left: 1px solid #ccc;
 }
 .bank_xljt1{
     height: 32px;

     position: absolute;
     width: 100%;
     top: 0px;
 }
</style>
